<template>
  <div class="add-goods">
    <el-card>
      <div class="header" slot="header">添加商品</div>
      <div class="card-body">
        <el-form
          label-width="120px"
          :model="goods"
          :rules="rules"
          ref="goodsForm"
        >
          <el-form-item label="商品名称" prop="productName">
            <el-input
              placeholder="商品名称"
              v-model="goods.productName"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="productNategoryId">
            <el-cascader
              v-model="goods.productCategoryId"
              :options="options"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="进货价" prop="costPrice">
            <el-input
              placeholder="进货价"
              v-model="goods.costPrice"
            ></el-input>
          </el-form-item>
          <el-form-item label="销售价" prop="salePrice">
            <el-input
              placeholder="销售价"
              v-model="goods.salePrice"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplier">
            <el-input
              placeholder="供应商名称"
              v-model="goods.supplier"
            ></el-input>
          </el-form-item>
          <el-form-item label="供应商电话" prop="phone">
            <el-input placeholder="供应商电话" v-model="goods.phone"></el-input>
          </el-form-item>
          <el-form-item label="进货时间" prop="createTime">
            <el-date-picker v-model="goods.createTime" type="datetime">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="生产日期" prop="produceTime">
            <el-date-picker v-model="goods.produceTime" type="datetime">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="过期日期" prop="expireTime">
            <el-date-picker v-model="goods.expireTime" type="datetime">
            </el-date-picker>
          </el-form-item>

          <el-button type="primary" @click="addGoodsData">提交</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAllCategory, addGoods } from "@/api/Goods";
import dayjs from "dayjs";
export default {
  data() {
    return {
      // 下拉框需要的数据
      options: [],
      goods: {
        productName: "",
        productCategoryId: "",
        costPrice: "",
        salePrice: "",
        supplier: "",
        phone: "",
        createTime: "",
        produceTime: "",
        expireTime: "",
      },
      rules: {
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        productCategoryId: [
          { required: true, message: "选择商品分类", trigger: "blur" },
        ],
        costPrice: [
          { required: true, message: "请输入进货价", trigger: "blur" },
        ],
        salePrice: [
          { required: true, message: "请输入销售价", trigger: "blur" },
        ],
        supplier: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入供应商电话", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "选择进货时间", trigger: "blur" },
        ],
        produceTime: [
          { required: true, message: "选择生产日期", trigger: "blur" },
        ],
        expireTime: [
          { required: true, message: "选择过期日期", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 添加商品数据
    addGoodsData() {
      this.$refs.goodsForm.validate((data) => {
        if (data) {
          // 处理日期时间数据
          this.goods.createTime = dayjs(this.goods.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.goods.produceTime = dayjs(this.goods.produceTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.goods.expireTime = dayjs(this.goods.expireTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          // 处理下拉框对应商品分类的id
          // this.goods.productCategoryId =
          //   this.goods.productCategoryId.length == 1
          //     ? this.goods.productCategoryId[0]
          //     : this.goods.productCategoryId[1];
          // 发送ajax
          addGoods(this.goods).then((resp) => {
            if (resp.data.code === 20000) {
              this.$router.push("/goods/GoodsList");
            }
          });
        }
      });
    },
    resetForm() {},
    // 加载商品分类数据
    loadGoodsAllCategory() {
      getAllCategory().then((resp) => {
        let respData = resp.data;
        if (respData.code === 20000) {
          respData.data.forEach((v) => {
            let category = {};
            category.value = v.id;
            category.label = v.category_name;
            // 判断当前的一级分类下面有没有二级分类
            if (v.children.length > 0) {
              // 存放二级分类的数据
              let subCategory = [];
              v.children.forEach((vv) => {
                subCategory.push({
                  value: vv.id,
                  label: vv.category_name,
                });
              });
              // 将二级分类挂到一级分类的下面
              category.children = subCategory;
            }
            this.options.push(category);
          });
        }
      });
    },
  },
  created() {
    this.loadGoodsAllCategory();
  },
};
</script>

<style lang="less" scoped>
.add-goods {
  width: 100%;
  height: 100%;
  .el-form {
    width: 400px;
    /deep/.el-input {
      width: 280px;
    }
  }
}
</style>
